<template>
  <div id="app">
     <login>
      <template #text>
        <div class="ap">
        <p>用户名</p>
        <input type='text'/>
      </div>
      </template>
      <template #password>
        <div class="ap">
        <p>密码</p>
        <input type='password'/>
      </div>
      </template>
      <template #sex>
        <div class="ap">
        <p>性别</p>
        <input type='radio' name="sex" value="男" />男
        <input type='radio' name="sex" value="女" />女
      </div>
      </template>
      <template #like>
        <div class="ap">
        <p>爱好</p>
        <input type='checkbox' value="抽烟" />抽烟
        <input type='checkbox' value="喝酒" />喝酒
        <input type='checkbox' value="烫头" />烫头
      </div>
      </template>
      <template #from>
        <div class="ap">
        <p>来自于</p>
        <select>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="南京">南京</option>
        </select>
      </div>
      </template>
     </login>
   </div>
</template>
 
<script>
  import login from './components/login.vue'
export default {
  name: "",
  components: {
    login
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
};
</script>

<style scoped>
   #app {
      width: 100%;
      border: 1px solid #000;
    }  
    .ap{
      border-bottom: 1px solid #000;
    }
</style>